import React from 'react'
import Head from 'next/head'
import Link from 'next/link'
import Image from 'next/image'
import Ipc from '../lib/ipc'
import { useQuery } from 'react-query'
import { useTranslation } from 'react-i18next'

import Button from '../components/ui/button'
import Card from '../components/ui/card'
import Label from '../components/ui/label'
import Loader from '../components/ui/loader'

function Home() {
    const consoles = useQuery('consoles', () => Ipc.send('consoles', 'get'), { staleTime: 60*1000 })
    const { t } = useTranslation()

    return (
        <React.Fragment>
            <Head>
                <title>Greenlight - {t('page.myConsoles.pageTitle')}</title>
            </Head>

            <div style={ {
                display: 'flex',
                flexDirection: 'row',
                flexWrap: 'wrap',
                alignItems: 'stretch',
                paddingTop: '20px',
            }}>
                { (consoles.isLoading === true) ? <Loader></Loader> :
                    (consoles.isFetched === true && consoles.data.length > 0) ? consoles.data.map((item, i) => {
                        return (
                            <Card className='padbottom' key={i}>
                                <h1>{item.name}</h1>

                                <div style={{
                                    width: 200,
                                    margin: '0 auto',
                                    paddingTop: 10,
                                }}>
                                    <Image src="" style={{
                                        width: 200,
                                        textAlign: 'center',
                                    }} alt='Console' width={ 200 } height={ 56 }></Image>
                                </div>

                                <h2 className='grey' style={{
                                    textAlign: 'center',
                                    fontSize: 12,
                                }}>{item.id}</h2>

                                <br />

                                {(item.remoteManagementEnabled === true && item.consoleStreamingEnabled === true) ?
                                    (item.powerState === 'On' ? <Label className='green'>{t('page.myConsoles.poweredOn')}</Label> :
                                        item.powerState === 'ConnectedStandby' ? <Label>{t('page.myConsoles.standby')}</Label> :
                                            <Label>{item.powerState}</Label>) :
                                    (<div>
                                        {!item.remoteManagementEnabled ? '' : <p><Label className='orange'>{t('page.myConsoles.warningLabel')}</Label> {t('page.myConsoles.managementWarning')}</p>}
                                        {!item.consoleStreamingEnabled ? '' : <p><Label className='orange'>{t('page.myConsoles.warningLabel')}</Label> {t('page.myConsoles.streamingWarning')}</p>}
                                    </div>)}

                                {/* <p>Name: {item.name}</p>
                                <p>ID: {item.id}</p>
                                <p>State: {item.powerState}</p>
                                <p>Type: {item.consoleType}</p>
                                <p>Assistant: {item.digitalAssistantRemoteControlEnabled ? 'Enabled' : 'Disabled'}</p>
                                <p>Remote: {item.remoteManagementEnabled ? 'Enabled' : 'Disabled'}</p>
                                <p>Streaming: {item.consoleStreamingEnabled ? 'Enabled' : 'Disabled'}</p><br /> */}

                                <div style={ { display: 'flex', gap: '20px', minWidth: 280 }}>
                                    <Link href={ `stream/${item.id}` }>
                                        <Button label={t('page.myConsoles.startStreamBtn')} className='btn-primary' />
                                    </Link>
                                </div>
                            </Card>
                        )
                    }) : <Card className='padbottom' key='noconsoles'>{t('page.myConsoles.noConsoles')}</Card>
                }
            </div>

        </React.Fragment>
    )
}

export default Home
